<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>不关机的云端电脑</title>
    <link rel="icon" type="image/x-icon" mce_href="/favicon.ico" href="image/favicon.ico">

    <link rel="stylesheet" href="bootstrap/plugin/bootstrap-select/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="bootstrap/plugin/ajaxSelect/css/ajax-bootstrap-select.css"/>
    <link rel="stylesheet" href="bootstrap/plugin/datetimepicker/css/bootstrap-datetimepicker.min.css"/>

    <link rel="stylesheet" href="bootstrap/plugin/bootstrap3-dialog/css/bootstrap-dialog.min.css"/>


    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-docs.min.css">
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/bootstrap-ie7.css">
    <![endif]-->


    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <![endif]-->
    <script src="js/bootstrap.js" type="text/javascript"></script>


    <style>h3 {
        text-align: center;
    }

    .bootstrap-select {
        width: 100% !important;
    }</style>


    <script type="text/javascript"
            src="bootstrap/plugin/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/ajaxSelect/js/ajax-bootstrap-select.js"></script>

    <script type="text/javascript" src="bootstrap/plugin/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
 <script type="text/javascript"
            src="bootstrap/plugin/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>

</head>
<body>
<div>

    <nav class="navbar-l1 navbar-default navbar-static-top" role="navigation" style="background-color:#008eb7;"
         onmouseover="javascript:$('#navbar-brand').css('color','#fff');"
         onmouseout="javascript:$('#navbar-brand').css('color','#00a2ca');">
        <div class="container-fluid">
            <div class="navbar-header">
                <a id="navbar-brand" class="navbar-brand" style="" href="/">vpsb2c.com</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="" href="/?mode=profile" title="当前用户：jiaoming42">您好，${loginedUser.nickname}</a></li>
                    <li></li>
                    <li></li>
                    <li><a style="" href="/logout" title="退出系统"><span
                            class="glyphicon glyphicon-log-out"></span>退出系统</a></li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <nav class="navbar-l2 navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-2"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
                <ul class="nav navbar-nav">
                    <c:choose>
                        <c:when test="${loginedUser.role == 0}">
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                        </c:when>
                        <c:otherwise>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                            <li class="active"><a style="padding-left:20px;padding-right:20px;"
                                                  href="/recordVps">VPS登记</a></li>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/userList">用户列表</a></li>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/hostList">主机</a></li>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/income">流水</a></li>
                            <c:if test="${loginedUser.role == 2}">
                                <li><a style="padding-left:20px;padding-right:20px;" href="/admin">设置管理员</a></li>
                            </c:if>
                        </c:otherwise>
                    </c:choose>


                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>

<div class="container-fluid">

    <div class="page-header">
        <h4>VPS购买登记</h4>
    </div>
    <form id="saleFrom" class="form-horizontal" role="form" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户：</label>

            <div class="col-sm-5">
                <select id="ajax-select-user" class="selectpicker with-ajax" data-live-search="true"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">主机：</label>

            <div class="col-sm-5">
                <select id="ajax-select-host" class="selectpicker with-ajax" data-live-search="true">
                    <option value="">请选择主机</option>
                    <c:forEach items="${allServerHosts}" var="serverHost">
                        <option value="${serverHost.ip}">${serverHost.hostname}</option>
                    </c:forEach>

                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">VPS：</label>

            <div class="col-sm-5" id="div-select-vps">
                <select id="ajax-select-vps" class="selectpicker with-ajax" data-live-search="true">

                    <option value="">请<span style="color: red">【先】</span>选择主机</option>


                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="rmb" class="col-sm-2 control-label">购买金额：</label>

            <div class="col-sm-5">
                <input type="number" name="rmb" value="" class="form-control" id="rmb" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputExpireData" class="col-sm-2 control-label">到期时间：</label>

            <div class="col-sm-5" id="inputExpireData">
                <div class="input-group date form_datetime"
                     data-date-format="dd MM yyyy - HH:ii p" data-link-field="expireTime">
                    <input class="form-control" size="16" type="text" value="" readonly="">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="expireTime" name="expireTime" required><br>
                <script type="text/javascript">
                    $(".form_datetime").datetimepicker({
                        format: 'yyyy年mm月dd日 hh时ii分ss秒',
                        language: 'zh-CN',
                        autoclose: true,
                        todayBtn: true
                    });
                </script>
            </div>
        </div>

        <div style="border-top: 1px solid #eee;"></div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-sm-offset-2 col-md-2">
                <button type="submit" class="btn btn-primary btn-block" role="button">提交</button>
                <input type="hidden" name="mode" value="submitProfile">
            </div>
            <div class="col-md-2">
                <a href="/?mode=profile" class="btn btn-default btn-block" role="button">取消</a>
            </div>
        </div>


    </form>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#saleFrom").submit(function (event) {
            event.preventDefault();
            event.stopPropagation();


            var email = $("#ajax-select-user").val();
            var host = $("#ajax-select-host").val();
            var vps = $("#ajax-select-vps").val();

            var expireTime =   $("#expireTime").val();;

            if (!email) {
                alert("请选择用户");
                return;
            }
            if (!host) {
                alert("请选择主机");
                return;
            }
            if (!vps) {
                alert("请选择vps");
                return;
            }
            if (!expireTime) {
                alert("请选择vps到期时间");
                return;
            }

            var url = "/doRecordVps"; // the script where you handle the form input.
            $.ajax({
                type: "POST",
                url: url,
                data: $("#saleFrom").serialize() + "&userEmail=" + email + "&host=" + host + "&vps=" + vps +"&expireTime" + expireTime, // serializes the form's elements.
                success: function (data) {
                    if (data.succ) {
                        BootstrapDialog.show({
                            title: '温馨提示',
                            message: '登记成功,需要继续登记吗?',
                            closable: false,
                            buttons: [{
                                label: '返回个人中心',
                                action: function(dialog) {
                                    window.location = "/" ;
                                }
                            }, {
                                label: '继续登记',
                                cssClass: 'btn-primary',
                                action: function(dialog) {
                                 //   dialog.close();
                                    location.reload(true);
                                }
                            }]
                        });
                    }
                    else {

                        BootstrapDialog.show({
                            title: '温馨提示',
                            message:  data.msg,
                            closable: false,
                            type:  BootstrapDialog.TYPE_DANGER,
                            buttons: [ {
                                label: '知道了',
                                action: function(dialogItself){
                                    dialogItself.close();
                                }
                            }
                            ]
                        });
                    }
                }
            });

            return false; // avoid to execute the actual submit of the form.
        });
    });
</script>
<script>


    $("#div-select-vps").click(function () {
        //  alert($('#ajax-select-host').find(":selected").text());
    });
    $("#ajax-select-host").change(function () {
        var end = this.value;
        $("#ajax-select-vps").empty();
        /**
         *To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state.
         * This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.
         */
        $('.selectpicker').selectpicker('refresh');
        // alert($('#ajax-select-host').find(":selected").text());
        $.ajax({
            url: "/getVpsByHostId",
            data: {
                hostIp: $('#ajax-select-host').find(":selected").val()
            },
            success: function (data) {
                if (data.length == 0) {
                    var tVps = {
                        "id": "",
                        "name": "该主机没有vps实例,请选择其他主机"
                    }
                    data.push(tVps);
                } else {
                    $('#ajax-select-vps').append($('<option>', {
                        value: "",
                        text: "请选择" + $('#ajax-select-host').find(":selected").text() + "下的vps"
                    }));
                }

                for (var idx = 0; idx < data.length; idx++) {
                    var vps = data[idx];
                    var value = vps.id;
                    var text =  vps.computerName +"_" + vps.vmName;
                    if(!value || value.length==0){
                        text ="该主机没有vps实例,请选择其他主机";
                    }
                    $('#ajax-select-vps').append($('<option>', {
                        value: value,
                        text: text
                    }));
                    //$('#ajax-select-vps').append('<option value="' + key + '">' + selectValues[key] + '</option>');
                }
                $('.selectpicker').selectpicker('refresh');
            }
        });
    });
    var optionsHost = {
        ajax: {
            url: '/getHostByFilter',
            type: 'GET',
            dataType: 'json',
            // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
            // automatically replace it with the value of the search query.
            data: {
                keyWord: '{{{q}}}'
            }
        },
        locale: {
            emptyTitle: '选择主机',
            searchPlaceholder: "搜索",
            statusNoResults: '没有相关数据',
            statusInitialized: "根据<span style='color:red;font-size: large'>主机IP地址</span>搜索"
        },
        log: 3,
        preprocessData: function (data) {

            console.log(">>>>>>>>>>>data:" + data);
            var i, l = data.length, array = [];
            if (l) {
                for (i = 0; i < l; i++) {
                    array.push($.extend(true, data[i], {
                        text: data[i].ip,
                        value: data[i].name,
                        data: {
                            subtext: data[i].name
                        }
                    }));
                }
            }
            console.log("array:" + array);
            // You must always return a valid array when processing data. The
            // data argument passed is a clone and cannot be modified directly.
            return array;
        }
    };
    var optionsVPS = {
        ajax: {
            url: '/getVpsByFilter',
            type: 'POST',
            dataType: 'json',
            // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
            // automatically replace it with the value of the search query.
            data: {
                keyWord: '{{{q}}}',
                ip: $('#ajax-select-host').find(":selected").text()
            }
        },
        locale: {
            emptyTitle: '选择VPS',
            searchPlaceholder: "搜索",
            statusNoResults: '没有相关数据',
            statusInitialized: "您需要先选择【主机】后才能选择vps"
        },
        log: 3,
        preprocessData: function (data) {

            console.log(">>>>>>>>>>>data:" + data);
            var i, l = data.length, array = [];
            if (l) {
                for (i = 0; i < l; i++) {
                    array.push($.extend(true, data[i], {
                        text: data[i].nickname,
                        value: data[i].email,
                        data: {
                            subtext: data[i].email
                        }
                    }));
                }
            }
            console.log("array:" + array);
            // You must always return a valid array when processing data. The
            // data argument passed is a clone and cannot be modified directly.
        }
    };
    var optionsUser = {
        ajax: {
            url: '/getUserByFilter',
            type: 'POST',
            dataType: 'json',
            // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
            // automatically replace it with the value of the search query.
            data: {
                keyWord: '{{{q}}}'
            }
        },
        locale: {
            emptyTitle: '选择用户',
            searchPlaceholder: "搜索",
            statusNoResults: '没有相关数据',
            statusInitialized: "根据用户登陆账号<span style='color:red;font-size: large'>邮箱</span>进行搜索"
        },
        log: 3,
        preprocessData: function (data) {
            console.log(">>>>>>>>>>>data:" + data);
            var i, l = data.length, array = [];
            if (l) {
                for (i = 0; i < l; i++) {
                    array.push($.extend(true, data[i], {
                        text: data[i].nickname,
                        value: data[i].email,
                        data: {
                            subtext: data[i].email
                        }
                    }));
                }
            }
            console.log("array:" + array);
            // You must always return a valid array when processing data. The
            // data argument passed is a clone and cannot be modified directly.
        }
    };

    $("#ajax-select-user").selectpicker().filter('.with-ajax').ajaxSelectPicker(optionsUser);
  //  $("#ajax-select-host").selectpicker().filter('.with-ajax').ajaxSelectPicker(optionsHost);
   // $("#ajax-select-vps").selectpicker().filter('.with-ajax').ajaxSelectPicker(optionsVPS);
</script>
</body>
</html>